<template>
  <div id="container">
    <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="Name">
        <!-- eslint-disable-next-line vue/no-v-model-argument -->
        <a-input v-model:value="formState.name" :rules="[{ required: true, message: '不可为空!' }]" placeholder="Enter name" />
      </a-form-item>
      <a-form-item label="Age">
        <!-- eslint-disable-next-line vue/no-v-model-argument -->
        <a-input-number v-model:value="formState.age" :rules="[{ required: true, message: '不可为空!' }]" placeholder="Enter age" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-form-item>
  </a-form>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import { message } from 'ant-design-vue';
import { ipcApiRoute } from '@/api';
import { ipc } from '@/utils/ipcRenderer';

const formState = reactive({
  name: '张三',
  age: 20,
});

const onSubmit = () => {
  ipc.invoke(ipcApiRoute.db.insert, toRaw(formState)).then(res => {
    if (res.code === 0) {
      message.success('User added successfully');
      formState.name = '';
      formState.age = null;
    } else {
      message.error('Failed to add user');
    }
  }).catch(err => {
    message.error('Error: ' + err.message);
  });
};
</script>

<style lang="less" scoped>
#container {
  padding: 20px;
  width: 100%;
}
</style>